<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 400px;
        height: 300px;
        border: solid 1px #999;
      }
    </style>
  </head>
  <body>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <hr />
    <div id="result"></div>

    <script>
      //获取 链接
      let links = document.querySelectorAll("a");
      //遍历为每个 link 绑定单击事件
      links.forEach((link) => {
        link.addEventListener("click", function (e) {
          //阻止默认行为
          e.preventDefault();
          //修改页面的 url
          history.pushState({id: 100}, null, e.target.href); // push 压入  state 状态  可以理解为压入一条历史记录
          //根据页面 url 的路径显示内容
          let { pathname } = location;
          //判断
          switch (pathname) {
            case "/home":
              result.innerHTML = "home home home"; // 渲染组件
              break;
            case "/about":
              result.innerHTML = "about about about";
              break;
            default:
              result.innerHTML = 'Not Found';
          }
          console.log(history);
        });
      });
    </script>
  </body>
</html>
